<template>
    <div>
            <h1>Vue基础语法-vue指令</h1>
            出生地点：<select>
                <option value="">请选择</option>
                <option v-bind:value="item.id"  v-for="item in city":key ="item.id">{{item.name}}</option>

            </select>

            <table>
                <tr>
                    <td>id</td>
                    <td>name</td>
                    <td>img</td>
                </tr>
                <tr v-for="item in person":key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td><img v-bind:src="item.img" alt="" width="100" height="100"></td>
                </tr>
            </table>
    </div>
</template>

<script setup lang="ts">
   import { ref,reactive } from 'vue';
//v-bind单向绑定，主要用于绑定标签属性 (value src title class style)
   let city =ref([
    {id:1,name:'河北'},
    {id:2,name:'河南'},
    {id:3,name:'山西'},
    {id:4,name:'山东'},
    {id:5,name:'湖南'},
    {id:6,name:'湖北'},
   ])

   let person = ref([
    {id:1,name:'张三',img:'https://img0.baidu.com/it/u=3260376025,1255253612&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1200'},
    {id:2,name:'张三',img:'https://img0.baidu.com/it/u=3260376025,1255253612&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1200'},
    {id:3,name:'张三',img:'https://img0.baidu.com/it/u=3260376025,1255253612&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1200'},
   ])
    
   
</script>

<style lang="scss" scoped>

</style>